Le build frontend

Côté Java

vendome 14 b20
carlton dance

Le build Java

ant logo 
<project name="MyProject" default="dist" basedir=".">
  <property name="src" location="src"/>
  <property name="build" location="build"/>
  <property name="dist"  location="dist"/>

  <target name="compile" description="compile the source" >
      <javac srcdir="${src}" destdir="${build}"/>
  </target>

  <target name="dist" depends="compile" description="generate the dist" >
      <mkdir dir="${dist}/lib"/>
      <jar jarfile="${dist}/lib/MyProject.jar" basedir="${build}"/>
  </target>

  <target name="clean" description="clean up" >
      <delete dir="${build}"/>
      <delete dir="${dist}"/>
  </target>
</project>
maven logo 
my-app
|-- pom.xml
`-- src
    |-- main
    |   `-- java
    |       `-- com
    |           `-- mycompany
    |               `-- app
    |                   `-- App.java
    `-- test
        `-- java
            `-- com
                `-- mycompany
                    `-- app
                        `-- AppTest.java
<project xmlns="http://maven.apache.org/POM/4.0.0" ... >
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.mycompany.app</groupId>
  <artifactId>my-app</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>jar</packaging>

  <dependencyManagement/>
  <dependencies/>

  <build>
    <pluginManagement/>
    <plugins/>
  </build>

</project>

Côté web

Un seul standard index.html

html5 css3 js

démo

nodejs logo

Plateforme basée sur V8 pour réaliser des applications javascript

module

package.json

{
  "name": "express",
  "description": "Fast, unopinionated, minimalist web framework",
  "version": "4.10.0",
  "license": "MIT",
  "repository": "strongloop/express",
  "homepage": "http://expressjs.com/",
  "dependencies": {
  },
  "devDependencies": {
  }
}

semver

>=1.2.7 <1.3.0


1.2.7 || >=1.2.9 <2.0.0


~1.2.3    :=    >=1.2.3 <1.(2+1).0    :=    >=1.2.3 <1.3.0
~1.2      :=    >=1.2.0 <1.(2+1).0    :=    >=1.2.0 <1.3.0
~1        :=    >=1.0.0 <(1+1).0.0    :=    >=1.0.0 <2.0.0


^1.2.3    :=    >=1.2.3 <2.0.0
^0.2.3    :=    >=0.2.3 <0.3.0
^0.0.3    :=    >=0.0.3 <0.0.4
npm logo

npm install

npm install (with no args in a package dir)
npm install <tarball file>
npm install <tarball url>
npm install <folder>
npm install [@<scope>/]<name> [--save|--save-dev]
npm install [@<scope>/]<name>@<tag>
npm install [@<scope>/]<name>@<version>
npm install [@<scope>/]<name>@<version range>
# https://github.com/twbs/bootstrap/blob/master/package.json
$ npm install bootstrap

# https://github.com/angular/angular/blob/master/package.json
$ npm install angular

Problème : chaque module embarque ses dépendances

$ npm install grunt
$ ls -1 node_modules/grunt/node_modules
async
coffee-script
colors
dateformat
eventemitter2
exit
findup-sync
getobject
glob
grunt-legacy-log
grunt-legacy-util
hooker
iconv-lite
js-yaml
lodash
...
bower logo

Bower

$ npm install -g bower
$ bower install -h
Usage:

    bower install [<options>]
    bower install <endpoint> [<endpoint> ..] [<options>]
Options:

    -F, --force-latest      Force latest version on conflict
    -h, --help              Show this help message
    -p, --production        Do not install project devDependencies
    -S, --save              Save installed packages into dependencies
    -D, --save-dev          Save installed packages into devDependencies
$ bower search angular
$ bower info angular

Registered package name

jquery

normalize

css

Git endpoint

https://github.com/user/package.git

git@github.com:user/package.git

Local folder

my/local/folder/

Public Subversion endpoint

svn+http://package.googlecode.com/svn/

Private Subversion endpoint

svn+ssh://package.googlecode.com/svn/

svn+https://package.googlecode.com/svn/

Shorthand (defaults to GitHub)

user/package

URL

http://example.com/script.js

http://example.com/style.css

http://example.com/package.zip

http://example.com/package.tar

Flat dependency tree

bower.json 1/2

{
  "name": "my-project",
  "description": "bla bla bla !",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "license": "AML",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "keywords": [
    "awesome",
    "project"
  ],
  "authors": [
    "me",
    "myself",
  ],

bower.json 2/2

  "homepage": "http://project.org",
  "repository": {
    "type": "git",
    "url": "git://github.com/foo/bar.git"
  },
  "dependencies": {
    "<name>": "<version>",
    "<name>": "<folder>",
    "<name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  },
  "resolutions": {
    "angular": "1.3.0-beta.16"
  },
  private: false
}

démo

Versionner ses dépendances ?

npm

$ npm shrinkwrap

{
  "name": "A",
  "version": "0.1.0",
  "dependencies": {
    "B": {
      "version": "0.0.1",
      "dependencies": {
        "C": {
          "version": "0.1.0"
        }
      }
    }
  }
}

Bower

lazy cat
grunt logo

Grunt

$ npm install -g grunt-cli

$ npm install -g grunt-init
$ git clone https://github.com/gruntjs/grunt-init-gruntfile  \
  ~/.grunt-init/gruntfile
$ grunt-init gruntfile
$ npm install

démo

grunt-wiredep

$ npm install --save-dev grunt-wiredep
grunt.loadNpmTasks('grunt-wiredep');

wiredep: {
    task: {
        src: 'index.html'
    }
}
<!-- bower:js -->
<!-- endbower -->

<!-- bower:css -->
<!-- endbower -->

grunt-contrib-connect

$ npm install --save-dev grunt-contrib-connect
grunt.loadNpmTasks('grunt-contrib-connect');

connect: {
    server: {
        options: {
            port: 9000,
            hostname: 'localhost'
        }
    }
}

démo

grunt style

$ ls >> .tmpfile
$ wc -l .tmpfile
12 .tmpfile
$ rm .tmpfile
gulp logo

gulp style

$ ls | wc -l
12
$

Stream

top gun

démo

rocky apollo
test code

démo

yeoman goals

Yeoman

jhipster

$ npm install -g yo
...
$ npm install -g generator-jhipster
...
$ mkdir jhipster && cd jhipster
$ yo jhipster
...
$ npm install
$ bower install
$ mvn spring-boot:run

démo

Résumé

bower logo grunt logo gulp logo yeoman logo

Questions ?